<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      margin:  0px;
      padding: 0px;
    }
  </style>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <canvas id="myCanvas" width="578," height="200"></canvas>
  <script type="text/javascript">
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // Set line width for all lines
    context.lineWidth = 25;
    context.strokeStyle = '#6BAFC1';

    // Miter line join (left)
    context.beginPath();
    context.moveTo(99, 150);
    context.lineTo(149, 50);
    context.lineTo(199, 150);
    context.lineJoin = 'miter';
    context.stroke();

    // Round line join (middle)
    context.beginPath();
    context.moveTo(239, 150);
    context.lineTo(289, 50);
    context.lineTo(339, 150);
    context.lineJoin = 'round';
    context.stroke();

    // Bevel line join (right)
    context.beginPath();
    context.moveTo(379, 150);
    context.lineTo(429, 50);
    context.lineTo(479, 150);
    context.lineJoin = 'bevel';
    context.stroke();
  </script>
</body>
</html>
